<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <v-breadcrumbs :items="breadcrumbs">
      <template v-slot:divider>
        <v-icon>forward</v-icon>
      </template>
    </v-breadcrumbs>
    <v-container class="v-container" fluid fill-height grid-list-md>
      <v-layout row wrap align-center>
        <span class="subheading">筛选</span>
        <v-flex class="ml-4" d-flex xs12 sm6 md3 lg2>
          <v-text-field label="问题名称" v-model="filter.name" @blur="$refs.table.update()"></v-text-field>
        </v-flex>
        <v-flex xs12>
          <v-btn color="info" @click="newHelp">新增</v-btn>
          <v-btn color="warning" @click="$refs.table.deleteHelp()">删除</v-btn>
        </v-flex>
        <v-flex xs12>
          <help-table ref="table" :question="filter.name" @edit="editHelp" @up="up" @down="down"></help-table>
        </v-flex>
      </v-layout>
    </v-container>
    <help-dialog ref="dialog" @update="$refs.table.update()"/>
  </div>
</template>

<script>
import helpTable from './Table'
import helpDialog from './Dialog'
import { postHelpUp, postHelpDown } from '../../api/help'
export default {
  name: 'Index',
  components: {
    helpTable,
    helpDialog
  },
  data: () => ({
    breadcrumbs: [
      {
        text: '帮助与反馈',
        disabled: true
      }
    ],
    filter: {
      name: ''
    }
  }),
  methods: {
    newHelp () {
      this.$refs.dialog.show('新建帮助')
      this.$refs.dialog.clear()
    },
    editHelp (data) {
      this.$refs.dialog.show('修改帮助')
      this.$refs.dialog.get(data)
    },
    up (id) {
      postHelpUp(id).then((res) => {
        this.$refs.table.update()
      })
    },
    down (id) {
      postHelpDown(id).then((res) => {
        this.$refs.table.update()
      })
    }
  }
}
</script>

<style scoped>

</style>
